<template>
  <div class="user-manage flex">
    <div class="query-form">
      <el-form :inline="true" :model="queryForm" ref="queryForm">
        <el-form-item prop="id">
          <el-input v-model="queryForm.id" placeholder="请输入用户id" />
        </el-form-item>
        <el-form-item prop="userName">
          <el-input v-model="queryForm.userName" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item prop="userState">
          <el-select v-model="queryForm.userState">
            <!-- :value="0" 表示数字型,value="0"是字符型 -->
            <el-option label="所有" :value="0"></el-option>
            <el-option label="在职" :value="1"></el-option>
            <el-option label="离职" :value="2"></el-option>
            <el-option label="试用期" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryFormSearch">查询</el-button>
          <el-button @click="queryFormReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <div class="action">
        <el-button type="primary" size="small" @click="handleCreate">新增</el-button>
        <el-button type="danger" size="small" @click="batchRemove">批量删除</el-button>
      </div>

      <el-table
        :data="tableList"
        ref="mainTable"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        background
        layout="prev, pager, next"
        :total="pager.total"
        :hide-on-single-page="false"
        v-model:currentPage="pager.pageNum"
        @current-change="handleCurrentPageChange"
      ></el-pagination>
    </div>

    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitleList[dialogAction]"
      width="70%"
      :before-close="handleDialogClose"
    >
      <el-form :model="dialogForm" ref="dialogForm" label-width="120px">
        <el-form-item prop="userName" label="用户名">
          <el-input v-model="dialogForm.userName" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item prop="userEmail" label="用户邮箱">
          <el-input v-model="dialogForm.userEmail" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item prop="userState" label="用户状态">
          <el-select v-model="dialogForm.userState">
            <!-- :value="0" 表示数字型,value="0"是字符型 -->
            <el-option label="所有" :value="0"></el-option>
            <el-option label="在职" :value="1"></el-option>
            <el-option label="离职" :value="2"></el-option>
            <el-option label="试用期" :value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleDialogCancel">Cancel</el-button>
          <el-button type="primary" @click="handleDialogConfirm">Confirm</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "Users",
  data() {
    return {
      queryForm: {
        id: "",
        userName: "",
        userState: 0,
      },
      multipleSelection: [],
      tableList: [],
      columns: [
        {
          prop: "_id",
          label: "用户id",
          width: 190,
        },
        {
          prop: "userName",
          label: "用户名",
          width: 120,
        },
        {
          prop: "userEmail",
          label: "用户邮箱",
          width: 180,
        },
        {
          prop: "userState",
          label: "用户状态",
          width: 180,
          formatter(row, column, value) {
            // console.log("🚀 ~ file: User.vue ~ line 108 ~ formatter ~ row, column, value", row, column, value)
            return { 1: "在职", 2: "离职", 3: "试用期" }[row.userState];
          },
        },
        {
          prop: "role",
          label: "角色",
          width: 120,
          formatter(row, column, value) {
            return { 0: "管理员", 1: "普通用户" }[value];
          },
        },
        {
          prop: "createTime",
          label: "创建时间",
          width: 180,
        },
        {
          prop: "lastLoginTime",
          label: "最近登录时间",
          width: 180,
        },
      ],
      pager: {
        // 分页对象
        pageSize: 10, // 默认每页的条数
        pageNum: 1, // 默认当前页为第一页
        total: 10,
      },

      // dialog
      dialogVisible: false,
      dialogForm: {
        userState: 1,
      },
      dialogTitle: "新增",
      dialogTitleList: {
        create: "新增",
        edit: "编辑",
      },
      dialogAction: "create",
    };
  },
  mounted() {
    this.getUsers();
  },
  methods: {
    // 批量删除
    async batchRemove() {
      const listForBatchRemove = [];
      this.multipleSelection.map((item) => listForBatchRemove.push(item._id));
      if (listForBatchRemove.length === 0) {
        this.$message.warning("请选择列表中的行");
        return;
      }
      const { modifiedCount } = await this.$api.userBatchRemove({
        ids: listForBatchRemove,
      });
      if (modifiedCount > 0) {
        this.$message.success("删除成功");
        this.getUsers();
      } else {
        this.$message.warning("删除失败");
      }
    },
    async getUsers() {
      const conditions = { ...this.queryForm, ...this.pager };
      console.log(
        "🚀 ~ file: User.vue ~ line 148 ~ getUsers ~ conditions",
        conditions
      );
      const { results, count } = await this.$api.userList(conditions);
      this.tableList = results;
      this.pager.total = count;
      console.log(
        "🚀 ~ file: User.vue ~ line 157 ~ getUsers ~ this.pager",
        this.pager
      );
    },
    // 行业编辑
    handleCreate() {
      console.log("🚀 ~ file: User.vue ~ line 175 ~ handleCreate");
      this.dialogVisible = true;
      this.dialogAction = "create";
      this.dialogTitle = this.dialogTitleList[this.dialogAction];
    },
    // 行业编辑
    handleEdit(index, row) {
      console.log(
        "🚀 ~ file: User.vue ~ line 174 ~ handleEdit ~ index, row",
        index,
        row
      );
this.dialogVisible = true;
      this.$nextTick(() => {
        this.dialogAction = "edit";
        this.dialogTitle = this.dialogTitleList[this.dialogAction];
        this.dialogForm = Object.assign({}, row);
        
      });
    },
    // 行内删除
    async handleDelete(index, row) {
      console.log(
        "🚀 ~ file: User.vue ~ line 177 ~ handleDelete ~ index, row",
        index,
        row
      );
      const { modifiedCount } = await this.$api.userBatchRemove({
        ids: [row._id],
      });
      this.getUsers();
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 重置
    queryFormReset() {
      this.$refs.queryForm.resetFields();
      this.pager.pageNum = 1;
      this.getUsers();
    },
    // 搜索,过滤条件
    queryFormSearch() {
      console.log("queryForm=>", this.queryForm);
      this.pager.pageNum = 1;
      this.getUsers();
    },
    // 分页 点击页码
    handleCurrentPageChange(val) {
      // 双向绑定:改变pager中的当前页码变化,根据条件获取所有用户
      this.getUsers();
    },

    // dialog
    handleDialogClose() {
      this.dialogVisible = false;
      this.$refs.dialogForm.resetFields();
    },
    handleDialogCancel() {
      this.dialogVisible = false;
      this.$refs.dialogForm.resetFields();
    },
    handleDialogConfirm() {
      console.log("🚀 ~ file: User.vue ~ line 274 ~ handleDialogConfirm ~ dialogForm", this.dialogForm)
      this.dialogVisible = false;
      this.$refs.dialogForm.resetFields();
    },
  },
};
</script>

<style lang="scss">
.user-manage{
  flex-direction: column;
  height: 100%;
}
</style>
